<template>
  <div class="container">
    <div class="title">
      选择支付方式
    </div>
    <div class="select-bar clearfix">
      <div class="select-item">
        <img :src="img_url+'/mp_3.0/微信支付图标@2x.png'"
             v-if="img_url"
             alt=""
             class="item-logo">
        <div class="item-name">
          微信支付
        </div>
        <img :src="img_url+'/mp_3.0/选中图标@2x.png'"
             v-if="img_url"
             alt=""
             class="item-status">
      </div>
    </div>
    <div class="bottom-bar clearfix">
      <div class="pay-btn"
           @tap.stop="wechat_pay()">
        确认支付
      </div>
      <div class="total">
        总计：<div class="money">{{pay_data.totalPrice}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import common from '@/assets/js/mmk_common.js'
export default {
  data () {
    return {
      img_url: common.image_resource,
      pay_data: {
        mall_name: "",
        order_sn: "",
        totalPrice: 0,
        type: ""
      }
    };
  },
  methods: {
    // 支付
    wechat_pay () {
      let that = this
      common.wechat_pay(this.pay_data.mall_name, this.pay_data.order_sn, this.pay_data.totalPrice, this.pay_data.type)
    },
  },
  onLoad (options) {
    // 接受支付信息
    if (options.mall_name) {
      this.pay_data = options
    }

  },
  onShow () {
    wx.getStorage({
      key: 'user_token',
      success: (res) => {

      },
      fail: () => {
        wx.navigateTo({ url: '/pages/package_main/login/main' });
      },
      complete: () => { }
    })
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: rgba(243, 244, 246, 1);
  .title {
    font-size: 14px;
    font-family: "PingFangSC-Medium", "PingFang SC";
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    line-height: 50px;
    padding-left: 15px;
  }
  .select-bar {
    height: 60px;
    padding: 0 15px;
    background-color: #fff;
    position: relative;
    .item-logo {
      width: 35px;
      height: 35px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 10px;
    }
    .item-name {
      line-height: 60px;
      font-size: 14px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      display: inline-block;
      vertical-align: middle;
    }

    .item-status {
      width: 20px;
      height: 20px;
      display: inline-block;
      vertical-align: middle;
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .bottom-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
    padding: 0 15px;
    box-sizing: border-box;
    .total {
      font-size: 12px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      float: right;
      vertical-align: middle;
      line-height: 50px;
      .money {
        font-size: 14px;
        font-family: "STHeitiTC-Medium", "STHeitiTC";
        font-weight: 500;
        color: rgba(255, 56, 62, 1);
        display: inline-block;
        vertical-align: middle;
        line-height: 50px;
      }
    }
    .pay-btn {
      width: 88px;
      height: 40px;
      background: rgba(255, 56, 62, 1);
      border-radius: 20px;
      font-size: 12px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 40px;
      text-align: center;
      float: right;
      vertical-align: middle;
      margin-top: 5px;
      margin-left: 10px;
    }
  }
}
</style>

